<template>
  <div class="index">
    <h3>父组件</h3>
    <ul>
      <li>房产数量：{{house}}</li>
      <li>手机信息：
        <ol>
          <li>品牌：{{phone.brand}}</li>
          <li>号码：{{phone.number}}</li>
        </ol>
      </li>
      <li>汽车信息：
        <ol>
          <li>颜色：{{car.color}}</li>
          <li>品牌：{{car.brand}}</li>
        </ol>
      </li>
    </ul>
    <Child/>
  </div>
</template>

<script>
  import Child from './Child.vue'

  export default {
    name:'Index',
    components:{Child},
    data() {
      return {
        house:5,
        phone:{
          brand:'华为',
          number:'13800000000'
        },
        car:{
          color:'黑色',
          brand:'雅迪'
        }
      }
    },
    provide(){
      return {
        house:this.house,
        phone:this.phone,
        car:this.car,
      }
    }
  }
</script>

<style lang="less" scoped>
  .index {
    background-color: rgb(165, 164, 164);
    padding: 20px;
    border-radius: 10px;
  }
</style>